<template>
  <div>
  <h2>Props传值： 父的值是{{ count }}</h2>
  <Child
    :count="count"
    :a="a"
    :b="b"
    :c="c"
    :changeCount="changeCount"
    @chnageMe="count = $event"
    @changeHer="count = $event"
  />
    <hr />
    <p>
      注释: <br />
      * 这两个主要是为了方便的向深层次的组件进行传值<br />
      *
      $attrs:(祖孙间的通信)
      可以接收父组件除了被当前组件props属性已经接收的所有props传值（class和style除外），我们通过v-bind="$attrs"一次性绑定给后代的组件<br />
      *
      $listeners:(孙向祖传递)
      可以接收父组件给当前组件绑定的所有自定义事件，我们可以通过v-on="$listeners"一次性绑定给后代的组件<br />
    </p>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "AttrsListeners" ,
  components: {
    Child,
  },
  data() {
    return {
      count: 0,
      a:1,
      b:2,
      c:3,
    };
  },
  methods: {
    changeCount(num) {
      this.count += num;
    },
  },
};
</script>

<style scoped>

</style>